<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统验证 - JYB工具箱</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fontawesome-all.min.css') }}">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        .verify-container {
            max-width: 500px;
            width: 90%;
        }
        .verify-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 40px;
            animation: slideIn 0.5s ease-out;
        }
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .verify-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .verify-header i {
            font-size: 60px;
            color: #667eea;
            margin-bottom: 20px;
        }
        .verify-header h2 {
            color: #333;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .status-box {
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            text-align: center;
        }
        .status-box.invalid {
            background-color: #fff3cd;
            border: 2px solid #ffc107;
        }
        .status-box.valid {
            background-color: #d4edda;
            border: 2px solid #28a745;
        }
        .status-box.error {
            background-color: #f8d7da;
            border: 2px solid #dc3545;
        }
        .status-icon {
            font-size: 40px;
            margin-bottom: 10px;
        }
        .status-message {
            font-size: 16px;
            margin-bottom: 10px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-control {
            border-radius: 10px;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            font-size: 16px;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .btn-verify {
            width: 100%;
            padding: 12px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-primary-custom {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .btn-primary-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .btn-success-custom {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }
        .btn-success-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
        }
        .btn-verify:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .alert {
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .email-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .footer-text {
            text-align: center;
            color: white;
            margin-top: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="verify-container">
        <div class="verify-card">
            <div class="verify-header">
                <i class="fas fa-shield-alt"></i>
                <h2>系统验证</h2>
                <p style="color: #666;">系统已锁定，需要管理员验证解锁</p>
            </div>

            <!-- 状态显示 -->
            {% if status.valid %}
            <div class="status-box valid">
                <div class="status-icon">
                    <i class="fas fa-check-circle" style="color: #28a745;"></i>
                </div>
                <div class="status-message">
                    <strong>✅ {{ status.message }}</strong>
                </div>
                <div style="margin-top: 15px;">
                    <a href="{{ url_for('main.index') }}" class="btn btn-verify btn-success-custom">
                        <i class="fas fa-home"></i> 进入系统
                    </a>
                </div>
            </div>
            {% else %}
            <div class="status-box invalid">
                <div class="status-icon">
                    <i class="fas fa-exclamation-triangle" style="color: #ffc107;"></i>
                </div>
                <div class="status-message">
                    <strong>{{ status.message }}</strong>
                </div>
            </div>

            <!-- 邮件配置检查 -->
            {% if not email_configured %}
            <div class="alert alert-danger">
                <i class="fas fa-times-circle"></i>
                <strong>邮件配置不完整！</strong><br>
                请先配置以下环境变量：
                <ul style="margin-top: 10px; margin-bottom: 0;">
                    <li>MAIL_USERNAME（邮箱账号）</li>
                    <li>MAIL_PASSWORD（邮箱授权码）</li>
                    <li>ADMIN_EMAIL（管理员邮箱）</li>
                </ul>
            </div>
            {% else %}
            
             <!-- 邮箱信息 -->
            <div class="email-info">
                <i class="fas fa-envelope"></i>
                管理员邮箱: <strong>{{ admin_email }}</strong>
                <div style="margin-top: 8px; color: #666; font-size: 13px;">
                    <i class="fas fa-info-circle"></i> 
                    管理员验证后，系统将解锁，所有用户均可访问
                </div>
            </div>

            <!-- 提示信息 -->
            <div id="alertBox" style="display: none;"></div>

            <!-- 验证表单 -->
            <form id="verifyForm">
                <div class="form-group">
                    <label for="verifyCode">
                        <i class="fas fa-key"></i> 验证码
                    </label>
                    <input 
                        type="text" 
                        class="form-control" 
                        id="verifyCode" 
                        placeholder="请输入6位验证码"
                        maxlength="6"
                        pattern="[0-9]{6}"
                        required
                    >
                    <small class="form-text text-muted">验证码有效期10分钟</small>
                </div>

                <div class="form-group">
                    <button type="button" class="btn btn-verify btn-primary-custom" id="sendCodeBtn">
                        <i class="fas fa-paper-plane"></i> 发送验证码
                    </button>
                </div>

                 <div class="form-group">
                    <button type="submit" class="btn btn-verify btn-success-custom" id="verifyBtn">
                        <i class="fas fa-unlock"></i> 验证并解锁系统
                    </button>
                </div>
            </form>
            {% endif %}
            {% endif %}
        </div>

         <div class="footer-text">
            <p>
                <i class="fas fa-lock"></i> 
                系统需要管理员定期验证以解锁使用<br>
                验证有效期：{{ config.VERIFICATION_VALIDITY_DAYS or 30 }}天<br>
                <span style="font-size: 12px; opacity: 0.8;">解锁后所有用户均可访问系统</span>
            </p>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        // 配置API URL
        const AUTH_URLS = {
            sendCode: '{{ url_for("auth.send_code") }}',
            verifyCode: '{{ url_for("auth.verify_code") }}'
        };
        
        $(document).ready(function() {
            let codeSent = false;

            // 显示提示信息
            function showAlert(message, type) {
                const alertBox = $('#alertBox');
                alertBox.html(`
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                `);
                alertBox.show();
            }

            // 发送验证码
            $('#sendCodeBtn').click(function() {
                const btn = $(this);
                btn.prop('disabled', true);
                btn.html('<span class="loading"></span> 发送中...');

                $.ajax({
                    url: AUTH_URLS.sendCode,
                    method: 'POST',
                    contentType: 'application/json',
                    success: function(response) {
                        showAlert(
                            '<i class="fas fa-check-circle"></i> ' + response.message,
                            'success'
                        );
                        codeSent = true;
                        
                        // 倒计时
                        let countdown = 60;
                        const interval = setInterval(function() {
                            countdown--;
                            btn.html(`<i class="fas fa-clock"></i> ${countdown}秒后可重发`);
                            
                            if (countdown <= 0) {
                                clearInterval(interval);
                                btn.prop('disabled', false);
                                btn.html('<i class="fas fa-paper-plane"></i> 重新发送验证码');
                            }
                        }, 1000);
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false);
                        btn.html('<i class="fas fa-paper-plane"></i> 发送验证码');
                        
                        const message = xhr.responseJSON?.message || '发送失败，请重试';
                        showAlert(
                            '<i class="fas fa-times-circle"></i> ' + message,
                            'danger'
                        );
                    }
                });
            });

            // 验证验证码
            $('#verifyForm').submit(function(e) {
                e.preventDefault();

                const code = $('#verifyCode').val().trim();
                if (!code) {
                    showAlert(
                        '<i class="fas fa-exclamation-circle"></i> 请输入验证码',
                        'warning'
                    );
                    return;
                }

                if (code.length !== 6) {
                    showAlert(
                        '<i class="fas fa-exclamation-circle"></i> 验证码必须是6位数字',
                        'warning'
                    );
                    return;
                }

                const btn = $('#verifyBtn');
                btn.prop('disabled', true);
                btn.html('<span class="loading"></span> 验证中...');

                $.ajax({
                    url: AUTH_URLS.verifyCode,
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ code: code }),
                    success: function(response) {
                        showAlert(
                            '<i class="fas fa-check-circle"></i> ' + response.message,
                            'success'
                        );
                        
                        // 延迟跳转
                        setTimeout(function() {
                            window.location.href = response.redirect;
                        }, 1500);
                     },
                     error: function(xhr) {
                         btn.prop('disabled', false);
                         btn.html('<i class="fas fa-unlock"></i> 验证并解锁系统');
                        
                        const message = xhr.responseJSON?.message || '验证失败，请重试';
                        showAlert(
                            '<i class="fas fa-times-circle"></i> ' + message,
                            'danger'
                        );
                    }
                });
            });

            // 自动聚焦验证码输入框
            $('#verifyCode').focus();
        });
    </script>
</body>
</html>

